﻿<!doctype html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幼教服务系统</title>
<meta name="keywords" content="幼教服务系统"/>
<meta name="description" content="幼教服务系统" />
<link href="Css/common.css" rel="stylesheet" media="all" />
<link href="Css/index.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/common.js" ></script><!---焦点图js-->
<script type="text/javascript" src="Scripts/scroll.js" ></script><!--页面中滚动及从下到上滚动js-->
</head>
<body id="index">
<!--头部-->
<div id="web-headbar">
	<div class="web-head">
		<div class="mobile-app">
			<div class="app_l">
				<a href="http://www.todayyj.com" class="app">今日幼教</a>
			</div>			
			<div class="app_l" onmouseover="qr_show(this)" onmouseout="qr_hide(this)">
				<a href="javascript:void(0)" class="app">今日小记者小程序</a>
				<div class="app-box" style="display:none">
					<p>扫一扫，关注我吧！</p>
					<div class="xcx-er"></div>
				</div>
			</div>
			<div class="app_r" onmouseover="qr_show(this)" onmouseout="qr_hide(this)">
				<a href="javascript:void(0)" class="weixin">幼教三六五微信公众平台</a>
				<div class="app-box weixin-box" style="display:none">
					<p>扫一扫，关注我吧！</p>
					<div class="weixin-er"></div>
				</div>
			</div>
		</div>
		<div class="head-tool">
			<div class="toolbox">
				<div class="toolbox-simple">
					<a class="toolbox-one-link" href="#">登录</a>
				</div>
			</div>
			<div class="line">|</div>
			<div class="toolbox">
				<div class="toolbox-simple ">
					<a href="#" class="toolbox-one-link" target="_blank">免费注册</a>
				</div>
			</div>
			<div class="line">|</div>
			<div class="toolbox">
				<div class="toolbox-simple toolbox-r">
					<a href="#" class="toolbox-one-link" target="_blank">消息通知</a>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="Scripts/header.js"></script>

<!--头部end-->
<!--logo-->
<div id="headerbar">
    <div class="clearfix" id="header">
        <div class="logo">
            <a class="logo-img" href="/"></a>
        </div>
        <div class="menu_nav">
            <ul class="navs clearfix">
                <li><a href="/web">首页</a></li>
                <li><a href="/web/res" class="on">幼教资源</a></li>
                <li><a href="#">职场人生</a></li>
                <li><a href="#">活动专区</a></li>
                <li><a href="#">直播课堂</a><img src="Images/new_ico.png" class="new_nav"/></li>
            </ul>
        </div>     
        <div class="search_btn">
            <img src="Images/search_btn.png"/>
        </div> 
    </div>
</div>
<!--logo end-->


<div class="mainWrap clearfix">
	<div class="banner_pagex">
    	<ul class="banner_box">
            {% for doc in docs %}
            <li class="{{doc.image_tag}}" style="background:url('../uploads/{{doc.image_url}}') no-repeat top center">
                <a href="{{doc.image_link}}" target="_blank"></a>
            </li>

            {% endfor %}
         
          
    	</ul>
        <ul class="btn_list clearfix">
        	<li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    </div>
</div>
<!--主体内容end-->

<!--主体部分开始-->
<div class="mainwraper">
    <div class="content content01y clearfix" style="margin-top: 20px;">
        <div class="mainbox clearfix">
            <div class="sort_title"><span>排序：</span></div>
            <div class="sort_conts">
                <ul class="sort_conts_ul">
                    <li><a class="mostRead">阅读量</a></li>
                    <li><a class="price">价格</a></li>
                </ul>
            </div>
            <div class="sort_right"></div>
            <div class="resource_cons no_top">
            </div>
            <div class="page-boxs clearfix">
                <div class="page-listx">
                    <ul id="yw0" class="yiiPager">
                        <li class="page"><a href="#">首页</a></li>
                        <li class="page"><a href="#">上一页</a></li>
                        <li class="page selected"><b>1</b></li>
                        <li class="page"><a href="#">2</a></li>
                        <li class="page"><a href="#">3</a></li>
                        <li class="page"><a href="#">4</a></li>
                        <li class="page"><a href="#">5</a></li>
                        <li class="page"><a href="#">下一页</a></li>
                        <li class="page"><a href="#">末页</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>

<!--footer-->

<!--右功能按钮分享客服回到顶部-->
<div id="rig_box">
    <div class="edu-widgets">  
    
       <div class="service" >
           <a title="在线客服" id="advice">
				<a href="#" title="在线客服">
                	<i class="tab-ico"></i>
                    <em class="tab-text">联系客服</em>
                </a>
			</a> 
        </div>
        <div class="g-top" title="返回顶部" style="margin-top:1px">
            <a href="#" title="返回顶部">
            	<i class="tab-ico"></i>
                <em class="tab-text">回到顶部</em>
            </a>
        </div> 
    </div>
 <div style="display:none;">
{literal}
    <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":["mshare","weixin","tsina","tqq","qzone","sqq","copy","print"],"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"0","bdPos":"right","bdTop":"130"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];$(window).ready(function(){$('#rig_box div a').mouseenter(function(){$(this).find('em.tab-text').css("background-color","#3793f8").animate({"left":"-61px"},"fast");$(this).find('i.tab-ico').css("background-color","#3793f8")});	$('#rig_box div a').mouseleave(function(){$(this).find('em.tab-text').css("background-color","#3793f8").animate({"left":"35px"},"fast");$(this).find('i.tab-ico').css("background-color","#3793f8");});})
</script>
{/literal}
</div>
<!--右功能按钮结束-->
</div>

<div class="tool-area clearfix">
    <div class="w1280">
        <div class="tool_a_l fl">
            <ul class="clearfix">
                <li class="first"><h3>帮助中心</h3></li>
                <li><a href="#">账号管理</a></li>
                <li><a href="#">积分规则</a></li>
                <li><a href="#">下载资源</a></li>
            </ul>
            <ul class="clearfix">
                <li class="first"><h3>服务支持</h3></li>
                <li><a href="#">售后政策</a></li>
                <li><a href="#">自助服务</a></li>
                <li><a href="#">相关下载</a></li>
            </ul>
            <ul class="clearfix">
                <li class="first"><h3>入驻平台</h3></li>
                <li><a href="#">幼儿园入驻</a></li>
                <li><a href="#">教研室入驻</a></li>
            </ul>
            <ul class="clearfix">
                <li class="first"><h3>关于我们</h3></li>
                <li><a href="#">加入我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
        <div class="tool_a_r fl">
            <ul class="clearfix">
                <li><img src="images/weixin.png" width="100" height="100"><p>关注微信公众平台</p></li>
                <li><img src="images/xcx.jpg" width="100" height="100"><p>使用幼教小程序</p></li>
            </ul>
        </div>
        <div class="tool_service fr">
            <div class="service-tel">400-100-5678</div>
            <div class="service-time">周一至周日  8:00-18:00</div>
            <div class="service-date"><img src="images/service_ico.png"/>24小时在线客服</div>
        </div>

    </div>
</div>
<div class="footerbar clearfix">
    <div class="w1280">
        <p>主办单位：中华人名共和国教育部  运行维护：中央电化教育馆  技术支持：今日教育集团</p>
        <p>国家教育资源公共服务平台 版权所有 京ICP备0905918号-3</p>
    </div>
</div>

<script src="Scripts/jquery-1.7.2.min.js"></script>
<script>
    $(function(){

        //1.获取资源总数
        $.get({
            url:"http://localhost:3000/web/source/api/count",
            success:(res)=>{
                let html_t = '';
                if(res.status === 200){
                    html_t = `共有<span class="lm_desc_num">${res.result}</span>条资源，供您选择学习`
                }else{
                    html_t = `共有<span class="lm_desc_num">0</span>条资源，供您选择学习`
                }
                $(".sort_right").html(html_t)
            }
        })

        //2.文章资源请求
        loadData();

        //3.按照阅读量排序
        $(".mostRead").on("click",()=>{
            loadData(1,100,"more");
        })

        //4，按照价格排序
        $(".price").on("click",()=>{
            loadData(1,100,"price");
        })
        
    })

    function loadData(page,pageSize,sortBy){

        //过滤数据
        page  = page || 1,
        pageSize = pageSize || 100,
        sortBy = sortBy || "more",


        //请求数据
        $.ajax({
            url:"http://localhost:3000/web/source/api/list",
            type:"get",
            data:{
                page:page,
                pageSize:pageSize,
                sortBy:sortBy
            },
            success:(res)=>{
                console.log(res);
                let tpl = '';
                //数据注入, 老师的判断手笔还是值得学习的，判断非常全面
                if(Array.isArray(res.result) && res.result.length > 0){
                    $(res.result).each((index,source)=>{
                        console.log(index,source)
                        tpl += `
                        <div class="resource_con">
                            <a href="/web/res_c?s_id=${source._id}">
                                <div class="resource_con_pic">
                                    <img src="/uploads/${source.small_img}"/>
                                </div>
                                <div class="resource_con_title">${source.title}</div>
                                <div class="resource_con_other">
                                    <span class="resource_con_other_favico"><img src="images/fav_ico_ed.png"/></span>
                                    <span class="resource_con_other_fav">收藏</span>
                                    <span class="resource_con_other_price">￥${source.price}</span>
                                </div>
                            </a>
                        </div>
                        `
                    })

                    $(".resource_cons").html(tpl)
                }
            }
        })
    }
</script>

</body>
</html>